<template>
    <div class="wrapper">
        <!-- <div class="lBox"> -->
          <scroller class="lBox" show-scrollbar="false">
          <!-- <scroller class="scroller" show-scrollbar="false"> -->
            <div class="boxItem">
                <div class="itemHeader" @click="uploadHeaderImg">
                    <text class="itemLableHeader">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
                    <image :src="headerImg || 'url'" class="itemHeaderImg"></image>
                    <!-- <text class="itemHeaderRight">5人已报价</text> -->
                    <!-- <div>aaa</div> -->
                </div>
                <div class="itemCase">
                    <text class="itemLable">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</text>
                    <input class="itemInput" placeholder="请输入姓名" maxlength="7" v-model="infoObj.trueName"></input>
                </div>
                <div class="itemCase">
                    <text class="itemLable">联系方式</text>
                    <input class="itemInput" placeholder="请输入联系方式" v-model="infoObj.mobile" @blur="vailMobile"></input>
                </div>
                <!-- <div class="itemCase">
                    <text class="itemLable">身份证号</text>
                    <input class="itemInput" placeholder="请输入身份证号" v-model="infoObj.idNumber" @blur="vailIdNum"></input>
                </div> -->
                <div class="itemCase">
                    <text class="itemLable">居住地址</text>
                    <input class="itemInput" placeholder="请输入居住地址" v-model="infoObj.address"></input>
                </div>
            </div>

            <!-- <div class="boxItem">
                <div class="amountBox">
                    <text class="amountLabel">擅长工种分类：(具体类别最多选择三个)</text>
                    
                </div>
                <div class="multiArea">
                  <wxc-grid-select
                      :list="testData2"
                      :limit="3"
                      :cols="5"
                      :customStyles="customStyles1"
                      @overLimit="onOverLimit"
                      @select="params => onSelect('res2', params)">
                    </wxc-grid-select>
                </div>
            </div>

            <div class="boxItem" v-if="selectedTmpTypes.length >= 1">
                <div class="amountBox">
                    <text class="amountLabel">{{selectedTmpTypes[0].title}}的类别：</text>
                    
                </div>
                <div class="multiArea">
                  <wxc-grid-select
                      :list="showTypes1"
                      :limit="3"
                      :cols="5"
                      :customStyles="customStyles"
                      @overLimit="onOverLimit"
                      @select="params => onSelectSub1('resSub1', params)">
                    </wxc-grid-select>
                </div>
            </div>

            <div class="boxItem" v-if="selectedTmpTypes.length >= 2">
                <div class="amountBox">
                    <text class="amountLabel">{{selectedTmpTypes[1].title}}的类别：</text>
                    
                </div>
                <div class="multiArea">
                  <wxc-grid-select
                      :list="showTypes2"
                      :limit="3"
                      :cols="5"
                      :customStyles="customStyles"
                      @overLimit="onOverLimit"
                      @select="params => onSelectSub2('resSub2', params)">
                    </wxc-grid-select>
                </div>
            </div>

            <div class="boxItem" v-if="selectedTmpTypes.length >= 3">
                <div class="amountBox">
                    <text class="amountLabel">{{selectedTmpTypes[2].title}}的类别：</text>
                    
                </div>
                <div class="multiArea">
                  <wxc-grid-select
                      :list="showTypes3"
                      :limit="3"
                      :cols="5"
                      :customStyles="customStyles"
                      @overLimit="onOverLimit"
                      @select="params => onSelectSub3('resSub3', params)">
                    </wxc-grid-select>
                </div>
            </div> -->
            

            <!-- <div class="boxItem">
                <div>
                    <text class="itemDesc">请上传身份证正反面照片</text>
                </div>
                <div class="itemPics">
                    <image :src="cerImgs[0]" class="itemPic" @click="uploadCerImg(0)"></image>
                    <image :src="cerImgs[1]" class="itemPic" @click="uploadCerImg(1)"></image>
                </div>
            </div>
            <div class="boxItem">
                <div>
                    <text class="itemDesc">请上传手持身份证正面照片</text>
                </div>
                <div class="itemPics2">
                    <image :src="cerImgs[2]" class="itemPic" @click="uploadCerImg(2)"></image>
                </div>
            </div> -->

            
            <div class="boxItem btnLoc">
                <wxc-button text="保存" type="blue" size="full" @wxcButtonClicked="openDialog"></wxc-button>
            </div>
          <!-- </scroller> -->
          </scroller>
        <!-- </div> -->

        <wxc-dialog title="更新确认"
                    content="更新信息将重新审核，审核期间将无法接单"
                    :show="show"
                    :single="false"
                    :is-checked="isChecked"
                    :show-no-prompt="false"
                    @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                    @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
                    @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
        </wxc-dialog>
        
    </div>
</template>
<script>
// import header from '../header';
import { WxcButton, WxcGridSelect, WxcDialog } from 'weex-ui'

export default {
    components: {
        WxcButton,
        WxcGridSelect,
        WxcDialog
    },
    data: () => ({
        token: '',
        show: false,
        isChecked: false,
        headerImg: 'bmlocal://assets/acw/header.png',
        cerImgs: ['bmlocal://assets/acw/cerTop.png', 'bmlocal://assets/acw/cerBack.png', 'bmlocal://assets/acw/cerHand.png'],
        // cerImgs: ['bmlocal://assets/zst/uploadImg.png', 'bmlocal://assets/zst/uploadImg.png'],
        infoObj: {},
        typeData: {},
        selectedTypes: [],
        selectedTypes1: [],
        selectedTypes2: [],
        selectedTypes3: [],
        selectedTmpTypes: [],
        selectedTmpTypes1: [],
        selectedTmpTypes2: [],
        selectedTmpTypes3: [],
        showTypes1: [],
        showTypes2: [],
        showTypes3: [],
        btnStyle: {
            
        },
        customStyles: {
          lineSpacing: '14px',
          width: '120px',
          height: '50px',
        },
        customStyles1: {
          lineSpacing: '14px',
          width: '120px',
          height: '50px',
        //   checkedBorderColor: '#4a96e4',
        //   checkedBackgroundColor: '#4a96e4',
        //   icon: "https://gw.alicdn.com/tfs/TB1IAByhgMPMeJjy1XdXXasrXXa-38-34.png"
        },
        testData2: [
        {
          'title': '获取中...',
          'checked': true
        }
      ],
    }),
    created () {
      this.$router.getParams().then(resData => {
        console.log("---===============---------")
          console.log(resData)
          this.infoObj = resData;
          if(resData.avatar != ''){
            this.headerImg = resData.avatar;
          }
          // this.getWorkerType()
      })
      
      
    },
    methods: {
        jumpWeb(_url) {
            this.$router.toWebView({
                url: _url,
                title: ''
            })
        },
        openDialog () {
            // if(!this.headerImg) {
            //     this.$notice.toast({ message: "请上传头像"});
            //     return false;
            // }

            if(this.infoObj.trueName.length > 4) {
                this.$notice.toast({ message: "姓名最长四位"});
                return false;
            }
            if(!this.infoObj.trueName) {
                this.$notice.toast({ message: "请输入姓名"});
                return false;
            }
            if(!this.infoObj.mobile) {
                this.$notice.toast({ message: "请输入手机号"});
                return false;
            }
            const mobileReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!mobileReg.test(this.infoObj.mobile)) {
                this.$notice.toast({ message: "请输入正确的手机号"});
                return false;
            }
            
            // if(!this.infoObj.idNumber) {
            //     this.$notice.toast({ message: "请输入身份证号"});
            //     return false;
            // }
            // const regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
            // if(!regIdNo.test(this.infoObj.idNumber)){  
            //     this.$notice.toast({ message: "请输入正确的身份证号"});
            //     return false;
            // }

            if(!this.infoObj.address) {
                this.$notice.toast({ message: "请输入地址"});
                return false;
            }
            this.commitInfo();
            // this.show = true;
        },
        vailIdNum() {
            const regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if(this.infoObj.idNumber && !regIdNo.test(this.infoObj.idNumber)){  
                this.$notice.toast({ message: "请输入正确的身份证号"});
                return false;
            }
        },
        vailMobile() {
            const mobileReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (this.infoObj.mobile && !mobileReg.test(this.infoObj.mobile)) {
                this.$notice.toast({ message: "请输入正确的手机号"});
                return false;
            }
        },
        wxcDialogCancelBtnClicked () {
        //此处必须设置，组件为无状态组件，自己管理
            this.show = false;
        },
        wxcDialogConfirmBtnClicked () {
            // this.selectedTypes= [...this.selectedTypes1, ...this.selectedTypes2, ...this.selectedTypes3];
            // console.log(this.selectedTypes);
            // if(this.selectedTypes.length > 3) {
            //     this.$notice.toast({ message: "只能选择三个类别"});
            //     return false;
            // }
        //此处必须设置，组件为无状态组件，自己管理
            this.show = false;
            this.commitInfo();
        },
        wxcDialogNoPromptClicked (e) {
        //此处必须设置，组件为无状态组件，自己管理
            this.isChecked = e.isChecked;
        },
        wxcButtonClicked(e) {
            this.$router.open({
                name: 'zst.home.orderInfo.finish',
                type: 'PUSH'
            })
        },
        onSelect (res, { selectIndex, checked, checkedList }) {
          // Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked
          //   ? '是'
          //   : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
          console.log(checkedList.map(item => item.id).join(','))
        //   this.selectedTypes = checkedList.map(item => item.id)
          this.selectedTmpTypes = checkedList.map(item => ({title: item.title, 'childs': item.childs}))
          this.showTypes1 = this.selectedTmpTypes[0].childs;
          this.showTypes2 = this.selectedTmpTypes[1].childs;
          this.showTypes3 = this.selectedTmpTypes[2].childs;
          console.log(this.selectedTypes)
        },
        onSelectSub1 (res, { selectIndex, checked, checkedList }) {
            const vm = this;
            let otherSelectL = this.selectedTypes1.length + this.selectedTypes2.length + this.selectedTypes3.length;
             console.log("::::::::::::::::::::;类别一： {" + otherSelectL)
            if(otherSelectL >= 3) {
                this.$notice.toast({ message: "只能选择三个类别"})
                this.selectedTypes1 = [];
                let tmpChilds = [];
                this.showTypes1.forEach((item, index) => {

                    console.log("---0-----------------类别一： {" + selectIndex + "====" + index);
                    if(selectIndex == index){
                        item.checked = false; 
                    }   
                    tmpChilds.push(item);
                    Vue.set(vm.showTypes1, index, item);
                })
                // Vue.set(vm.showTypes1, 0, {title: vm.selectedTmpTypes[0].title, 'childs': tmpChilds})
            } else {
                this.selectedTypes1 = checkedList.map(item => item.id)
            }
            console.log("::::::::::::::::::::;类别一： " + this.selectedTypes)
          // Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked
          //   ? '是'
          //   : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
        //   console.log(checkedList.map(item => item.id).join(','))
        //   this.selectedTypes = checkedList.map(item => item.id)
        //   this.selectedTmpTypes = checkedList.map(item => item.title)
        //   console.log(typeof this.selectedTypes)
        
        },
        onSelectSub2 (res, { selectIndex, checked, checkedList }) {
            const vm = this;
            let otherSelectL = this.selectedTypes1.length + this.selectedTypes2.length + this.selectedTypes3.length;
            console.log("::::::::::::::::::::;类别二---「： " + otherSelectL)
            if(otherSelectL >= 3) {
                this.$notice.toast({ message: "只能选择三个类别"})
                this.selectedTypes2 = [];
                let tmpChilds = [];
                this.showTypes2.forEach((item, index) => {
                        
                    if(selectIndex == index){
                        item.checked = false; 
                    }      
                    tmpChilds.push(item);
                    Vue.set(vm.showTypes2, index, item);
                })
                console.log("::::::::::::::::::::;类别二---： " + vm.showTypes2)
                // Vue.set(vm.selectedTmpTypes, 1, {title: vm.selectedTmpTypes[1].title, 'childs': tmpChilds})
                
            } else {
                this.selectedTypes2 = checkedList.map(item => item.id)
            }
            console.log("::::::::::::::::::::;类别二： " + this.selectedTypes)
          // Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked
          //   ? '是'
          //   : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
        //   console.log(checkedList.map(item => item.id).join(','))
        //   this.selectedTypes = checkedList.map(item => item.id)
        //   this.selectedTmpTypes = checkedList.map(item => item.title)
        //   console.log(typeof this.selectedTypes)
        },
        onSelectSub3 (res, { selectIndex, checked, checkedList }) {
            const vm = this;
            let otherSelectL = this.selectedTypes1.length + this.selectedTypes2.length + this.selectedTypes3.length;
            if(otherSelectL >= 3) {
                this.$notice.toast({ message: "只能选择三个类别"})
                this.selectedTypes3 = [];
                let tmpChilds = [];
                this.showTypes3.forEach((item, index) => {
                    // if(selectIndex == index){
                    //     item.checked = false; 
                    // }   
                    item.checked = false;
                    tmpChilds.push(item);
                    console.log("==========="+ checked +"==========" + JSON.stringify(item))
                    Vue.set(vm.showTypes3, index, item);
                })
                // Vue.set(vm.selectedTmpTypes, 2, {title: vm.selectedTmpTypes[2].title, 'childs': tmpChilds})
            } else {
                this.selectedTypes3 = checkedList.map(item => item.id)
            }
            console.log("::::::::::::::::::::;类别三： " + this.selectedTypes3)
          // Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked
          //   ? '是'
          //   : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
        //   console.log(checkedList.map(item => item.id).join(','))
        //   this.selectedTypes = checkedList.map(item => item.id)
        //   this.selectedTmpTypes = checkedList.map(item => item.title)
        //   console.log(typeof this.selectedTypes)
        },
        onOverLimit (limit) {
          modal.toast({
            message: `最多选择${limit}个`,
            duration: 0.8
          });
        },
        uploadHeaderImg() {
          var userInfo = this.$storage.getSync('UserInfo');

          this.token = userInfo.token;

          this.$image.pickAndUpload({
              // url: '',                     // 自定义图片上传地址，默认上传地址是 eros.native.js 中的 image 地址
              // maxCount: 9,                 // 一次最多可选择图片数量 最大支持9张 默认是1
              imageWidth: 1000,            // 图片宽度（根据宽度按比例裁剪）可以不传默认为 800px
              // allowCrop: true,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
              // params: {},                  // 传递的参数
              header: {
                'X-TMACW-APP-Token': this.token
              }                   // 自定义请求 header
          })
          .then(resData => {
              console.log("=============成功===============") 
              console.log(JSON.stringify(resData))    // [url1, url2...]
              if(resData[0].errno == 0){
                this.headerImg = resData[0].data.url;
                
                console.log("=============成功1===============" + this.headerImg) 
              } else {
                  this.$notice.toast({ message: resData.errmsg})
              }
              
          }, error => {
            console.log("=============失败===============") 
              console.log(error)
              this.$notice.toast({ message: "通信失败, 请重试"})
          })
        },
        uploadCerImg(index) {
          var userInfo = this.$storage.getSync('UserInfo');

          this.token = userInfo.token;

          this.$image.pickAndUpload({
              // url: '',                     // 自定义图片上传地址，默认上传地址是 eros.native.js 中的 image 地址
              // maxCount: 9,                 // 一次最多可选择图片数量 最大支持9张 默认是1
              imageWidth: 1000,            // 图片宽度（根据宽度按比例裁剪）可以不传默认为 800px
              // allowCrop: true,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
              // params: {},                  // 传递的参数
              header: {
                'X-TMACW-APP-Token': this.token
              }                   // 自定义请求 header
          })
          .then(resData => {
              console.log("=============成功===============") 
              console.log(JSON.stringify(resData))    // [url1, url2...]
              if(resData[0].errno == 0){
                this.cerImgs[index] = resData[0].data.url;
                Vue.set(this.cerImgs, index, resData[0].data.url)
                console.log("=============成功1===============" + this.headerImg) 
              } else {
                  this.$notice.toast({ message: resData.errmsg})
              }
              
          }, error => {
            console.log("=============失败===============") 
              console.log(error)
              this.$notice.toast({ message: "上传失败, 请重试"})
          })
        },
        getWorkerType () {

          const vm = this;
          console.log("++++++++++-===============")
          var userInfo = this.$storage.getSync('UserInfo');

          this.token = userInfo.token;

          this.$notice.toast({ message: userInfo.token})

          this.$fetch({
              method: 'POST',    // 大写
              name: 'my.workerTypesTree', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
              data: {},
              header: {
              'X-TMACW-APP-Token': this.token
              }
          }).then(resData => {
              // 成功回调
              console.log("::::::::::::::::::::::::工种")
              console.log(resData)
              if(resData && resData.errno == 0) {
                  this.testData2 = [];
                  let types = resData.data.types;
                  types.forEach((item, index) => {
                      if(this.infoObj.parentTypeNames.includes(item.name)) {
                          let tmpChilds = [];
                          item.child.forEach((item1, index1) => {
                              if(vm.infoObj.typeNames.includes(item1.name)) {
                                  tmpChilds.push({title: item1.name, id: item1.id, checked: true})
                              } else {
                                  tmpChilds.push({title: item1.name, id: item1.id, checked: false})
                              }
                          })
                          this.testData2.push({title: item.name, id: item.id, childs: tmpChilds, checked: true})
                          this.selectedTmpTypes.push({title: item.name, id: item.id, childs: tmpChilds, checked: true})
                        //   this.showTypes1 = this.selectedTmpTypes[0].childs;
                        //   this.showTypes2 = this.selectedTmpTypes[1].childs;
                        //   this.showTypes3 = this.selectedTmpTypes[2].childs;
                      } else {
                          let tmpChilds = [];
                          item.child.forEach((item1, index1) => {
                              if(vm.infoObj.typeNames.includes(item1.name)) {
                                  tmpChilds.push({title: item1.name, id: item1.id, checked: true})
                              } else {
                                  tmpChilds.push({title: item1.name, id: item1.id, checked: false})
                              }
                          })
                          this.testData2.push({title: item.name, id: item.id, childs: tmpChilds, checked: false})
                      }
                  });

                  if(this.selectedTmpTypes[0]) {
                      this.showTypes1 = this.selectedTmpTypes[0].childs;

                      this.selectedTypes1 = [];
                      
                      this.showTypes1.forEach((item, index) => {
                          if(item.checked){
                              vm.selectedTypes1.push(item.id);
                          }
                      })
                  }
                  
                  if(this.selectedTmpTypes[1]) {

                      this.showTypes2 = this.selectedTmpTypes[1].childs;
    
                      this.selectedTypes2 = [];
    
                      this.showTypes2.forEach((item, index) => {
                          if(item.checked){
                              vm.selectedTypes2.push(item.id);
                          }
                      })
                  }

                  if(this.selectedTmpTypes[2]) {

                      this.showTypes3 = this.selectedTmpTypes[2].childs;
    
                      this.selectedTypes3 = [];
    
                      this.showTypes3.forEach((item, index) => {
                          if(item.checked){
                              vm.selectedTypes3.push(item.id);
                          }
                      })
                  }
                  
              } else {
                  this.$notice.toast({ message: resData.errmsg})
              }
          }, error => {
              // 错误回调
              console.log(error)
              this.$notice.toast({ message: "获取失败, 请重试"})
          })
        },
        commitInfo (e) {

          // this.selectedTypes= [...this.selectedTypes1, ...this.selectedTypes2, ...this.selectedTypes3];
          // console.log(this.selectedTypes);
          // if(this.selectedTypes.length > 3) {
          //     this.$notice.toast({ message: "只能选择三个类别"});
          //     return false;
          // }

        //   return;
            
          let vm = this;
          var userInfo = this.$storage.getSync('UserInfo');

          let wUpdateParams = {
                "address": this.infoObj.address,
                // "avatar": this.headerImg,
                // "gender": 0,
                "id": userInfo.id + "",
                "idNumber": this.infoObj.idNumber,
                "mobile": this.infoObj.mobile,
                // "pic1": this.cerImgs[0],
                // "pic2": this.cerImgs[1],
                "trueName": this.infoObj.trueName,
                // "typeIds": this.selectedTypes,
                // "workYeas": 0
              }

          if(this.headerImg && this.headerImg != "bmlocal://assets/acw/header.png") {
              wUpdateParams.avatar = this.headerImg;
          } 

          if(this.cerImgs[0] && this.cerImgs[0] != "bmlocal://assets/acw/cerTop.png") {
              wUpdateParams.pic1 = this.cerImgs[0];
          } 
          
          if (this.cerImgs[1] && this.cerImgs[1] != "bmlocal://assets/acw/cerBack.png") {
              wUpdateParams.pic2 = this.cerImgs[1];
          }

          if (this.cerImgs[2] && this.cerImgs[2] != "bmlocal://assets/acw/cerHand.png") {
              wUpdateParams.pic3 = this.cerImgs[2];
          }

          this.token = userInfo.token;
          this.$fetch({
              method: 'POST',    // 大写
              name: 'my.workerUpdate', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
              data: wUpdateParams,
              header: {
                'X-TMACW-APP-Token': this.token
              }
          }).then(resData => {
              // 成功回调
              console.log(resData)
              if(resData && resData.errno == 0) {
                //  this.$router.open({
                //       name: 'zst.home.my',
                //       type: 'PUSH'
                //   })
                // this.$router.setBackParams({
                //     name: 'zst.home.my',
                //     trueName: this.infoObj.trueName,
                //     avatar: this.headerImg
                // })
                vm.infoObj = resData.data.worker;
                
                this.$router.back({
                    length: 1,
                    type: 'PUSH',
                    callback() {
                        // 返回成功回调
                        vm.infoObj.avatar = vm.headerImg;
                        console.log("||||||||||||||||||+" + JSON.stringify(vm.infoObj));
                        vm.$event.emit('refreshUserInfo',vm.infoObj)
                    }
                })
                
              } else {
                  this.$notice.toast({ message: resData.errmsg})
              }
          }, error => {
              // 错误回调
              console.log(error)
              this.$notice.toast({ message: "提交失败, 请重试"})
          })
        }
    }
}
</script>
<style lang="sass" scoped>

.wrapper {
    background-color: #F4F4F4;
    // padding-bottom: 10px;
    padding-top: 15px;
    width: 750px;
}

.tlt {
    text-align: center;
    color: #333;
    width: 750px;
    padding: 10px;
    font-size: 30px;
}

.lBox {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
    width: 750px;
    // background-color: red;
}

.boxItem {
    width: 700px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #E1E1E1;
    border-radius: 20px;
    margin-bottom: 15px;
    // background-color: black;
}

.itemCase {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 650px;
  height: 100px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #E1E1E1;
}

.itemLable {
  /* height: 50px; */
  width: 135px;
  color: #A5A5A5;
  font-size: 28px;
}
.itemLableHeader {
  /* height: 50px; */
  width: 180px;
  color: #A5A5A5;
  font-size: 28px;
}

.itemInput {
  flex: 1;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  /* background-color: #333 */
}

.multiArea {
  width: 650px;
  padding-bottom: 20px;
  // height: 200px;
}

.amountBox {
    width: 650px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.amountLabel {
    color: #A5A5A5;
    font-size: 30px;
}

.amountInput {
    width: 200px;
    height: 50px;
    line-height: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: #E1E1E1;
    border-radius: 10px;
    text-align: center;
}

.btnLoc {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #eee;
    // top: 50px;
}

.itemHeader {
    width: 650px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #E1E1E1;
}

.itemHeaderImg {
    width: 70px;
    height: 70px;
    border-radius: 70px;
}

.itemHeaderName {
    margin-left: 20px;
    font-weight: 600px;
    font-size: 35px;

}

.itemHeaderRight {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
    color: #A5A5A5;
    font-size: 30px;
    /* position: absolute;
    right: 0; */
    /* margin-right: 100px; */
    /* background-color: #000;
    color: #fff; */
    /* left: 100px;
    right: 0; */
}

.itemDesc {
    width: 650px;
    margin-top: 20px;
    margin-bottom: 10px;
    /* text-align: center; */
    color: #A5A5A5;
    font-size: 28px;
    lines: 2;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.itemDescIndent {
    text-indent: 150px;
}

.itemPics {
    width: 650px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.itemPics2 {
    width: 650px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-left: 33px;
}

.itemPic {
    width: 292px;
    height: 224px;
    margin-bottom: 20px;
}

 .itemStatus {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     width: 650px;
     margin-bottom: 10px;
 }

.itemStatusFirst {
    margin-right: 20px;
    color: #A5A5A5;
    font-size: 28px;
}

.itemStatusSecond {
    color: #A5A5A5;
    font-size: 28px;
}

.gb-box {
    padding: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.i-gd {
    width: 350px;
    height: 510px;
    margin-bottom: 20px;
}

.gd-bg {
    background-color: #f4f4f4;
}

.gd-img {
    width: 350px;
    height: 350px;
}

.gd-tlt {
    font-size: 28px;
    color: #333;
    width: 350px;
    margin-top: 15px;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gd-info {
    display: block;
    font-size: 28px;
    width: 350px;
    height: 65px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #9F8A60;
    background-color: #F1ECE2;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gd-price {
    font-size: 28px;
    width: 350px;
    margin-top: 10px;
    color: #b4282d;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>